<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/common/reset.css" />
    <link rel="stylesheet" href="./css/common/1px.css" />
    <link rel="stylesheet" href="./components/diao/index.css" />
    <link rel="stylesheet" href="./css/diao/resorce.min.css" />
  </head>
  <body>
    <script src="./lib/rem.js"></script>
    <header class="header">
      <div class="header-wrap">
        <a href="javascript:history.go(-1)" class="header-icon"></a>
        <h2 class="header-data">选择资源</h2>
      </div>
    </header>

    <section>
      <div class="fill-content">
        <h2 class="fill-content-title">三亚5日4晚半自助游套餐</h2>
        <p>
          <span>出发日期：</span>
          2017-9-10
        </p>
        <div class="fill-content-both">
          <p>
            <span>出行人数：</span>
            3成人
          </p>
          <span fill-title-right>预定限制></span>
        </div>
      </div>

      <div class="plane-contain">
        <div class="place">
          <div class="place-destination">
            <p class="place-title">三亚</p>
            <p class="place-name">首都国际机场</p>
            <p class="place-time">6:30</p>
          </div>
          <div class="place-icon"></div>
          <div class="place-terminus">
            <p class="place-title">北京</p>
            <p class="place-name">首都国际机场</p>
            <p class="place-time">10:40</p>
          </div>
        </div>
        <div class="message">
          <div class="message-item">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10
                <span>星期</span>
                五
              </p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10 星期
              </p>
            </div>
          </div>
          <div class="message-item">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10
                <span>星期</span>
                五
              </p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10 星期
              </p>
            </div>
          </div>
          <div class="message-item">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10
                <span>星期</span>
                五
              </p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10 星期
              </p>
            </div>
          </div>
          <div class="message-item message-item-last">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
            </div>
          </div>
        </div>
      </div>

      <div class="plane-contain">
        <div class="place">
          <div class="place-destination">
            <p class="place-title">三亚</p>
            <p class="place-name">首都国际机场</p>
            <p class="place-time">6:30</p>
          </div>
          <div class="place-icon"></div>
          <div class="place-terminus">
            <p class="place-title">北京</p>
            <p class="place-name">首都国际机场</p>
            <p class="place-time">10:40</p>
          </div>
        </div>
        <div class="message">
          <div class="message-item">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10
                <span>星期</span>
                五
              </p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10 星期
              </p>
            </div>
          </div>
          <div class="message-item">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10
                <span>星期</span>
                五
              </p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10 星期
              </p>
            </div>
          </div>
          <div class="message-item">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10
                <span>星期</span>
                五
              </p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
              <p class="message-item-week">
                2017-9-10 星期
              </p>
            </div>
          </div>
          <div class="message-item message-item-last">
            <div class="message-item-left">
              <p class="message-item-data">日期</p>
            </div>
            <div class="message-item-right">
              <p class="message-item-data">日期</p>
            </div>
          </div>
        </div>
      </div>

      <div class="coupon-contain">
        <div class="coupon-wrap">
          <div class="coupon-text">
            <p>2成人起订</p>
            <p>每单立减800元！</p>
          </div>
          <div class="coupon-input">
            <a class="coupon-input-add" href="javascript:;">-</a>
            <span class="coupon-input-num">3</span>
            <a class="coupon-input-dec" href="javascript:;">+</a>
          </div>
        </div>
      </div>

      <div class="coupon-contain coupon-contain-repast">
        <div class="coupon-wrap">
          <div class="coupon-text">
            <p>2成人起订</p>
            <p>每单立减800元！</p>
          </div>
          <div class="coupon-input">
            <a class="coupon-input-add" href="javascript:;">-</a>
            <span class="coupon-input-num">3</span>
            <a class="coupon-input-dec" href="javascript:;">+</a>
          </div>
        </div>
      </div>

      <div class="bill-contain">
        <div class="bill-bg">
          <span class="bill-bg-text">附加额外费用账单</span>
        </div>
        <div class="bill-room">
          <div class="bill-position">
            <p class="bill-title">单房差</p>
            <div class="bill-input">
              <a class="bill-input-common bill-input-add" href="javascript:;">-</a>
              <span class="bill-input-common bill-input-num">3</span>
              <a class="bill-input-common bill-input-dec" href="javascript:;">+</a>
            </div>
            <div class="bill-price">
              <span class="bill-price-icon">¥</span>
              <span class="bill-price-size">520</span>
              <span class="bill-price-num">/人</span>
            </div>
          </div>
        </div>
        <div class="bill-room bill-tickets-first">
          <div class="bill-position">
            <p class="bill-title">超值换购水上乐园成人门票</p>
            <div class="bill-input">
              <a class="bill-input-common bill-input-add" href="javascript:;">-</a>
              <span class="bill-input-common bill-input-num">3</span>
              <a class="bill-input-common bill-input-dec" href="javascript:;">+</a>
            </div>
            <div class="bill-price">
              <span class="bill-price-icon">¥</span>
              <span class="bill-price-size">50</span>
              <span class="bill-price-num">/人</span>
            </div>
          </div>
        </div>
        <div class="bill-room bill-tickets-second">
          <div class="bill-position">
            <p class="bill-title">超值换购天涯海角门票</p>
            <div class="bill-input">
              <a class="bill-input-common bill-input-add" href="javascript:;">-</a>
              <span class="bill-input-common bill-input-num">3</span>
              <a class="bill-input-common bill-input-dec" href="javascript:;">+</a>
            </div>
            <div class="bill-price">
              <span class="bill-price-icon">¥</span>
              <span class="bill-price-size">36</span>
              <span class="bill-price-num">/人</span>
            </div>
          </div>
        </div>

        <div class="bill-caption">
          <p class="bill-caption-title">意外保险</p>
          <div class="bill-caption-inner">
            <i class="bill-caption-inner-icon"></i>
            <p class="bill-caption-inner-text">
              保险价格均为参考价，最终会以预订人真实年龄重新计算。
            </p>
          </div>
          <div class="bill-caption-section01">
            <input class="bill-caption--input" type="checkbox" name="" id="" />
            <p class="bill-caption-section01-title">平安i旅行境内长线保险 经典型 最高赔偿3000元</p>
            <p class="bill-caption-section01-text">
              请您付款后24小时内提供出行人证件信息，否则将自动为您退订此保险。
            </p>
            <div class="bill-caption-price">
              <span class="bill-caption-price-icon">¥</span>
              <span class="bill-caption-price-size">120</span>
              <span class="bill-caption-price-num">2份</span>
            </div>
          </div>
          <div class="bill-caption-section01 bill-caption-section02">
            <input class="bill-caption--input" type="checkbox" name="" id="" />
            <p class="bill-caption-section01-title">
              平安i旅行境内长线保险 尊贵型 含航意险140万元
            </p>
            <div class="bill-caption-price">
              <span class="bill-caption-price-icon">¥</span>
              <span class="bill-caption-price-size">154</span>
              <span class="bill-caption-price-num">2份</span>
            </div>
            <div class="bill-caption-section02-last">重选保险></div>
          </div>
        </div>
      </div>
    </section>

    <footer class="footer-contain">
      <p class="footer-contain-text">下一步，填写订单</p>
    </footer>
  </body>
</html>
